{% extends 'base_footer.html' %}
{% block head %}
    <script>
        $(function () {
            var user_error = false;
            var password_error = false;

            $('.name_input').blur(function () {
                {# $(this): 表示获取当前操作的用户名input标签。#}
                if ($(this).val() == ""){
                    {# 没有输入用户名，显示错误信息 #}
                    $('.user_error').html('请输入用户名').show();
                    user_error = true;
                }
                else{
                    {#输入用户名了，将错误信息隐藏#}
                    $('.user_error').hide();
                    user_error = false
                }
            })

            $('.pass_input').blur(function () {
                {# $(this): 表示获取当前操作的用户名input标签。#}
                if ($(this).val() == ""){
                    {# 没有输入用户名，显示错误信息 #}
                    $('.pwd_error').html('请输入密码').show();
                    password_error = true;
                }
                else{
                    {#输入用户名了，将错误信息隐藏#}
                    $('.pwd_error').hide();
                    password_error = false
                }
            })
            {#点击登录按钮了#}
            $('form').submit(function () {
                {#  用户没有点击两个输入框，直接点击登录  #}
                var name = $('.name_input').val();
                var password = $('.pass_input').val();
                if (name == ""){
                    {#$('.user_error').html('请输入用户名').show();#}
                    user_error = true;
                }
                if (password == ""){
                    {#$('.pwd_error').html('请输入密码').show();#}
                    password_error = true;
                }

                if (user_error == false && password_error == false){
                    {# 用户和密码同时输入时才不阻止提交事件 #}
                    return true;
                }
                else{
                    {#阻止submit的提交事件#}
                    return false;
                }
            });
            if (1=={{ is_user }}){
                {# 用户名错误 #}
                $('.user_error').html('用户名错误').show();
                user_error = true
            }
            if (1=={{ is_password }}){
                $('.pwd_error').html('密码错误').show();
            }
        })
    </script>
{% endblock %}

{% block title %}
    天天生鲜-登陆
{% endblock %}

{% block main %}
    <div class="login_top clearfix">
        <a href="register.html" class="login_logo"><img src="/static/images/logo02.png"></a>
    </div>

    <div class="login_form_bg">
        <div class="login_form_wrap clearfix">
            <div class="login_banner fl"></div>
            <div class="slogan fl">日夜兼程 · 急速送达</div>
            <div class="login_form fr">
                <div class="login_title clearfix">
                    <h1>用户登录</h1>
                    <a href="/account/register/">立即注册</a>
                </div>
                <div class="form_input">
                    <form action="{% url 'user:login' %}" method="POST">
                        {% csrf_token %}
                        <input type="text" name="username" class="name_input" placeholder="请输入用户名" value="{{ username }}">
                        <div class="user_error">输入错误</div>

                        <input type="password" name="password" class="pass_input" placeholder="请输入密码" value="{{ password }}">
                        <div class="pwd_error">输入错误</div>

                        <div class="more_input clearfix">
                            <input type="checkbox" name="jizhu">
                            <label>记住用户名</label>
                            <a href="#">忘记密码</a>
                        </div>
                        <input type="submit" name="" value="登录" class="input_submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}